<template>
    <div class="order-sidebar">
        <div class="sidebar-billing">
            <h2>Order breakdown</h2>
            <ul class="order-sidebar-info">
                <!-- 商品价格 -->
                <li>
                    <span>Production ({{ priceDetail.count }} piece)</span>
                    <strong v-text="getPriceFormat(priceDetail.product)"></strong>
                </li>
                <!-- 空白模板优惠价格 -->
                <li v-if="priceDetail.blank_price">
                    <span>Blank products 5% off</span>
                    <strong v-text="'- ' + getPriceFormat(priceDetail.blank_price)"></strong>
                </li>

                <!-- 吊牌价格 -->
                <li v-if="priceDetail.tag_price">
                    <span type="hangtag">Hang tag</span>
                    <strong v-text="getPriceFormat(priceDetail.tag_price)"></strong>
                </li>

                <!-- 包装价格 -->
                <li v-if="priceDetail.pack_price">
                    <span type="packaging">Package bag</span>
                    <strong v-text="getPriceFormat(priceDetail.pack_price)"></strong>
                </li>

                <!-- 用户等级折扣 -->
                <li v-if="priceDetail.userDiscountPrice">
                    <CommonLevelDiscount :level="info.pricing" type="icon|label|diff" :other="{diff:'- ' + getPriceFormat(priceDetail.userDiscountPrice)}" />
                </li>

                <!-- 优惠劵 -->
                <li v-if="priceDetail.couponDiscountPrice">
                    <span>Coupon {{ priceDetail.couponDiscountLabel }}</span>
                    <strong v-text="'- '+ getPriceFormat(priceDetail.couponDiscountPrice)"></strong>
                </li>

                <!-- 运费 -->
                <li>
                    <span>Shipping</span>
                    <strong v-text="getPriceFormat(priceDetail.shipping)"></strong>
                </li>

                <!-- 税费 -->
                <li v-show="priceDetail.tax != 0">
                    <span>Tax</span>
                    <strong v-text="getPriceFormat(priceDetail.tax)"></strong>
                </li>
            </ul>

            <div class="order-sidebar-total">
                <span>Total:</span>
                <p>
                    <small v-text="currency"></small>
                    <em v-text="getPriceFormat(priceDetail.total)"></em>
                </p>
            </div>

            <div class="order-sidebar-billing" v-if="info.order_state !== 11">
                <span v-show="pricing.payment == 1">Payment method: Paypal</span>
                <span v-show="pricing.payment == 2">Payment method: Credit card</span>
                <span v-show="pricing.payment == 3">Payment method: Credit card</span>
                <span v-show="pricing.payment == 4">Payment method: Wallet</span>
            </div>
            <div v-else style="height:6px"></div>

        </div>

        <div class="sidebar-address">
            <h2>Address</h2>
            <div class="sidebar-address-info">
                <h4 v-text="address.first_name"></h4>
                <p v-if="address.phone" v-text="address.phone"></p>
                <p v-if="address.email" v-text="address.email"></p>
                <p v-if="address.street" v-text="address.street"></p>
                <p v-if="address.district" v-text="address.district"></p>
                <p v-text="[address.city,address.state,address.post_code].filter(i=>i).join(',')"></p>
                <p v-if="address.country" v-text="address.country"></p>
                <OrderRemoteSign :post_code="address.post_code" v-if="remoteSign" />
            </div>

            <div class="sidebar-address-error" v-if="!shipping">
                <!-- <img src="@/assets/images/order/dialog-shipping-empty.png" alt=""> -->
                <!-- <span>No logistics information</span> -->
            </div>

            <div class="sidebar-address-logistics" v-else>
                <strong v-text="shipping.name +' shipping'"></strong>
                <p>
                    <em>{{ shipping.need_time_min }} - {{ shipping.need_time_max }}</em>
                    <b>business days</b>
                    <span>Shipping time frame excludes production lead time.</span>
                </p>

            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "OrderPaidSidebar",
    props: {
        info: { type: Object, default: () => ({}) },
        priceDetail: { type: Object, default: () => ({}) },
        logistics: { type: Array, default: () => [] },
    },
    data () {
        return {
        };
    },
    computed: {
        currency () { return (this.info || {}).currency },
        rate () { return (this.info || {}).rate || 1 },
        // 支付方式
        pricing () {
            return (this.info || {}).pricing || {};
        },
        address () {
            return (this.info || {}).address || {};
        },
        remoteSign () {
            const info = this.info || {}
            const logistics = info.logistics || {}
            return !!logistics.remote_sign
        },

        shipping () {
            const logistics = (this.info || {}).logistics || {};
            const channel = (logistics.my_logistics_channel || "").toUpperCase();
            return this.logistics.find(i => i.no == channel);
        },
    },
    methods: {
        getPriceFormat (val) {
            let value = parseFloat(val * this.rate / 100) || 0;
            return value.toFixed(2);
        },
    },
    created () {
    }
};
</script>
<style lang="scss" scoped>
.sidebar-billing,
.sidebar-address {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;

    & > h2 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        border-bottom: 1px solid #e6e6e6;
        line-height: 40px;
        padding: 0 12px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
    }
}

.order-sidebar-info {
    margin: 16px 14px 0;
    flex: 1;
    & > li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        line-height: 16px;
        font-size: 14px;
        margin-top: 16px;

        .level-discount {
            font-size: 14px;
            display: flex;
            width: 100%;
            height: 16px;
            &::v-deep span[name='icon'] {
                width: 14px;
                height: 14px;
                background-size: 14px 14px;
                margin-right: 4px;
            }
            &::v-deep span[name='label'] {
                margin-left: 0;
            }
            &::v-deep span[name='diff'] {
                flex: 1;
                text-align: right;
                font-weight: normal;
            }
        }

        span {
            font-size: 14px;
            color: #000;
            position: relative;

            &[type='hangtag']::before {
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                margin-right: 4px;
                vertical-align: top;
                margin-top: 0px;
                border-radius: 16px;
                background-size: 16px 16px;
                background-position: center center;
                background-repeat: no-repeat;
                background-color: #e38c8c;
                background-image: url(https://img.podpartner.com/static/images-20230202/brand/hangtag-icon.png);
            }
            &[type='packaging']::before {
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                margin-right: 4px;
                vertical-align: top;
                margin-top: 0px;
                border-radius: 16px;
                background-size: 16px 16px;
                background-position: center center;
                background-repeat: no-repeat;
                background-color: #9b89bc;
                background-image: url(https://img.podpartner.com/static/images-20230202/brand/package-icon.png);
            }
        }
        small {
            flex: 1;
            text-align: right;
            color: #000000;
            font-weight: normal;
            font-size: 12px;
            margin-right: 8px;
        }
        strong {
            color: #000000;
            font-weight: normal;
        }
    }
}

.order-sidebar-total {
    position: relative;
    margin: 48px 14px 10px;
    padding-top: 16px;
    border-top: 1px dashed #e6e6e6;

    & > span {
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
    }

    & > p {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-top: 10px;

        small {
            font-size: 16px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 18px;
            position: relative;
            top: -1px;
            margin-right: 4px;
        }

        em {
            font-size: 26px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 28px;
        }
    }
}

.order-sidebar-billing {
    border-top: 1px solid #f2f2f2;
    height: 32px;
    background: #fbfbfb;
    border-radius: 0px 0px 7px 7px;
    text-align: right;
    font-size: 14px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #555555;
    line-height: 32px;
    padding: 0 13px;
}

.sidebar-address {
    margin-top: 12px;
}

.sidebar-address-info {
    padding: 16px 14px 14px;
    h4 {
        line-height: 28px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: #000000;
        word-break: break-word;
        padding-bottom: 4px;
    }
    p {
        margin-top: 6px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #212121;
        line-height: 22px;
        word-break: break-word;
        span {
            display: inline;
            & + span:before {
                content: '/';
                padding: 0 5px;
            }
        }
    }

    .remote-sign {
        border-top: none;
        margin-top: 12px;
        font-size: 14px;
    }
}

.sidebar-address-logistics {
    display: flex;
    flex-direction: column;
    padding: 10px 14px 16px;
    position: relative;

    & > strong {
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
    }

    & > p {
        margin-top: 12px;

        em,
        b {
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            line-height: 18px;
        }

        span {
            display: block;
            position: relative;
            margin-top: 6px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            font-size: 12px;
            color: #212121;
            line-height: 20px;
            &::before {
                content: '*';
                display: inline-block;
                margin-right: 3px;
                // width: 3px;
                // height: 3px;
                // border-radius: 3px;
                // background-color: #333;
                // position: absolute;
                // left: 0;
                // top: 7px;
            }
        }
    }

    & > span {
        margin-top: 10px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 18px;
    }
}
</style>
